﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>下拉滚动条滚到底部了吗？</title>
    <!--<script src="http://weijieke.711688.net.cn/admin_wjk/js/jquery-2.1.4.min.js"></script>-->
    <!--<script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>-->
    <style>

        .message-box {
            padding: 0.5rem;
            width: 100%;
            height: 100%;
            overflow-y: auto; /*竖直方向有滚动条，如果想要横向的，可以把y改为x*/
        }

    </style>

 
</head>
<body>
    <div id="div1" style="overflow-y:auto; overflow-x:hidden; height:1500px;">
        <div style="background-color:#ccc; height:1750px;">IE 和 FF 下测试通过</div>
    </div>
    <script language="javascript">
        var div = document.getElementById('div1');
        div.scrollTop = div.scrollHeight;

        //$('#div1')[0].scrollTop = $('#div1')[0].scrollHeight;

        //window.onload = function() {
        //    var test = document.getElementById("div1");
        //    test.onscroll = function() {
        //        // 注意这里不能用style.height，因为style.height获取的是标签里的style的height，如果标签里没有设置height，那么就获取不到。
        //        // style属性的最大作用是用来设置css属性而不是获取css属性。获取样式使用getComputedStyle。
        //        var clientH = test.clientHeight;
        //        var scrollT = test.scrollTop;
        //        var wholeH = test.scrollHeight;
        //        if (clientH + scrollT >= wholeH) {
        //            alert("到div底部啦");
        //        }
        //    };
        //};
    </script>
</body>
</html>